window.addEventListener('load', function () {
    // 1.获取元素
    var focus = document.querySelector('.focus')
    var arrow_l = document.querySelector('.arrow-l')
    var arrow_r = document.querySelector('.arrow-r')
    var foucsWidth = focus.offsetWidth
    // 2.鼠标经过就显示隐藏按钮
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block'
        arrow_r.style.display = 'block'
        clearInterval(timer)
        // 定时器清除不用后 最后把变量清空
        timer = null
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none'
        arrow_r.style.display = 'none'
        // 鼠标离开开启定时器
        timer = setInterval(function () {
            arrow_r.click()
        }, 2000)

    })
    // 3.根据焦点图动态生成对应数量圆圈
    var ul = focus.querySelector('ul')
    var ol = focus.querySelector('.circle')
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li')
        // 记录当前圆圈的索引号 通过自定义属性来做
        li.setAttribute('index', i)
        ol.appendChild(li)

        // 4.在生成圆圈li时同时给他绑定点击事件
        // 生成一个li标签就会添加一个事件 等价于了所有的圆圈li绑定了点击事件
        li.addEventListener('click', function () {
            for (var i = 0; i < ol.children.length; i++) {
                // 因为并没有获取li元素 所以只能用children[i]替代所有的li
                ol.children[i].className = ''
            }
            this.className = 'current'
            // 5.点击小圆圈 移动图片 移动的是ul 计算公式：当前圆圈索引号乘以图片的宽度 （索引号需自定义）
            // 获取图片的宽度 在上面全局都可以用

            // 拿到当前圆圈的索引号 然后计算图片移动的距离 公式：当前圆圈索引号*图片的宽度 
            var index = this.getAttribute('index')

            // 9.当我们点击某个li就把当前这个li的索引号给 num 和circle 这样顺序就不会乱了
            num = circle = index

            // 注意 移动的距离是负值
            animate(ul, -index * foucsWidth)
        })
    }
    ol.children[0].className = 'current'
    // 6.无缝联播：深克隆第一张图片li放到ul最后面
    var first = ul.children[0].cloneNode(true)
    ul.appendChild(first)
    // 7.每点击右侧按钮 图片就滚动一张 利用变量自加 然后用图片移动距离的公式：自定义变量索引 * 图片宽度 
    var num = 0
    var circle = 0
    var flag = true
    arrow_r.addEventListener('click', function () {
        //  如果走到最后一个右侧按钮图片（克隆的第一张焦点图）后不做动画 直接回到left0的位置 无缝联播原理
        if (flag) {
            flag = false
            if (num == ul.children.length - 1) {
                ul.style.left = 0 + 'px'
                num = 0
            }
            num++


            // 如果走到最后一个圆圈 就复原到第一个圆圈
            circle++
            if (circle == ol.children.length) {
                circle = 0
            }

            // 公式：当前圆圈索引号乘以图片的宽度
            animate(ul, -num * foucsWidth, function () {
                flag = true
            }
            )
            // 8.调用圆圈颜色排他函数 
            circleChange()
        }
    })




    // 10.左侧按钮

    arrow_l.addEventListener('click', function () {
        if (flag) {
            if (num == 0) {
                num = ul.children.length - 1
                ul.style.left = -num * foucsWidth + 'px'
            }
            num--
            animate(ul, -num * foucsWidth, function () {
                flag = true
            })
            circle--
            if (circle < 0) {
                circle = ol.children.length - 1
            }
            circleChange()
        }
    })


    // 圆圈颜色排他函数
    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
        }
        ol.children[circle].className = 'current'
    }
    // 11.自动播放 利用定时器调用点击事件
    var timer = setInterval(function () {
        arrow_r.click()
    }, 2000)


})